
<template>
  <div class="data-analy-box" style="padding:5px">
    <sub-title 
      :title="`${ gisForm.perspective == 1 ? '基站偏差总数：' : '小区偏差总数：' } ${ total }个` " 
    />

    <ak-table
      :sortAttr=" gisForm.perspective == 1 ? lonSortObj : azSortObj "
      :tableData=" tableData.length > 0 ? tableData[pageNum - 1]: []"
      :labelObj="gisForm.perspective == 1 ? lonLabel: azLabel"
      :addList="gisForm.perspective == 1 ? lonAdd: azAdd"
      :checkedIdAttr="gisForm.perspective == 1 ? 'enbid': 'eci'"
      :checkedId="gisForm.cId"
      @changeSort="changeSortType"
      @changeCId="changeCId"
    >
    </ak-table>

    <div class="pagination-container">
      <el-pagination
        :hide-on-single-page="true"
        background
        small
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        align="right"
        :pager-count="5"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
   
  </div>
</template>
<script>
import SubTitle from '@/components/gisPageComponents/subTitle'
import AkTable from '@/components/gisPageComponents/table'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapStateForm, mapMutations: mapMutationsForm, mapActions: mapActionsForm } = createNamespacedHelpers("gisForm");

export default {
  name:'LongitudeAzimuth',
  components:{ SubTitle, AkTable },

  data: () => ({
    
    lonLabel: {
      enbid: 'EnbID',
      dis: '偏差距离',
    },
    lonAdd: [ 'enbid', 'dis' ],
    lonSortObj: { dis: 'custom' },

    azLabel: {
      eci: 'ECI',
      az: '工参',
      forecastAz: '预测',
      angleDiff: '偏差'
    },
    azAdd: [ 'eci', 'az',  'forecastAz', 'angleDiff' ],
    azSortObj: { },

    pageSize: 10,
    total: 1,
    pageNum: 1,
    
    tableData: [],

  }),
  computed: { 
    ...mapState(['gisForm']),
     ...mapStateForm([   
      'perspective',
      'cId', //选中的id，
      'lonList', // 经纬度列表
      'azList', // 方位角列表  
    ]),
  },
  
  watch:{
    'perspective'(nv) {
      // console.log(nv);
      this.pageNum = 1;
      this.setCId({ data: null, jumpMap: false });
    },
    'lonList'(nv) {
      // console.log(nv);
      this.initTableData();
    },
    'azList'(nv) {
      // console.log(nv);
      this.initTableData();
    },
    'cId'(nv) {
      if( nv ) {
        this.jumpPage(nv)
      }
    }
    
  },
  created(){
    // 初始化加载列表
    this.initTableData();
  },
  methods:{
    ...mapMutationsForm([
      'setCId',
      'setLonAndAzSortType'
    ]),
    // 初始化
    initTableData() {
      let allList = this.gisForm.perspective == 1? this.lonList: this.azList;
      this.total = allList.length;
      let tableData = this.group(allList, this.pageSize);
      this.tableData = tableData;
      // console.log( tableData );
      
    },
    // 把一个数组拆成分页数组
    group(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while(index < array.length) {
        newArray.push(array.slice( index, index += subGroupLength ));
      }
      return newArray;
    },

    // 跳转到当前选中id 页
    jumpPage(cId) {
      // 查找当前页 列表是否存在 cId
      let findList = this.tableData[this.pageNum - 1];
      let checkIdAttr = this.gisForm.perspective == 1 ? 'enbid': 'eci';
      let checkItem = findList.find( v => v[checkIdAttr] == cId  );
      if( checkItem === undefined ) {
        // 查找总列表
        let page = this.pageNum;
        let allList = this.gisForm.perspective == 1? this.lonList: this.azList;
        let currentIndex = allList.findIndex( v => v[checkIdAttr] == cId )
        if( currentIndex !== -1 ) {
          page = Math.ceil( (currentIndex + 1 ) / this.pageSize )
        }
        // console.log( page)
        this.pageNum = page
      }
      
    },
    
    // 更改sort
    changeSortType(e) {
      console.log(e);
      this.setLonAndAzSortType( e.sortType );
    },
    changeCId(e) {
      // console.log( e );
      this.setCId({ data: e, jumpMap: true });
    },

    changePage(e) {
      this.pageNum = e;
    },
  
  }
}
</script>